<template>
  <div>
    <div class="Bargaining_foo">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div>
            <img :src="item.pic" alt="" width="120px" height="120px" />
          </div>
          <div class="Bargaining_foo_add">
            <div class="yjqa">{{ item.name }}</div>
            <div class="yjqb">{{ item.recommendStatusStr }}</div>
            <div class="asss">
              <div >
                <p style="font-size: 16px; color: red">{{ item.minPrice }}</p>
                低价
              </div>
              <div style="margin-left: 20px">
                <p style="font-size: 16px; color: gray">
                  {{ item.originalPrice }}
                </p>
                原价
              </div>
              <div style="margin-left: 20px">
                <p style="font-size: 16px; color: gray">
                  {{ item.numberOrders }}
                </p>
                销量
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style  lang="scss" scoped>
.Bargaining_foo {
  width: 100%;
  ul {
    width: 100%;
    margin-top: 1rem;
    li {
      width: 100%;
      height: 2.9rem;
      box-sizing: border-box;
      border-bottom: 1px solid gainsboro;
      padding: 5px;
      display: inline-flex;
      .Bargaining_foo_add {
        margin-left: 5px;
       .yjqa {
          margin-bottom: 0.2rem;
          font-size: 0.32rem;
        }
        .yjqb{
              margin-bottom: 0.2rem;
        
        }
        .asss {
          display: inline-flex;
         
       
          div:nth-child(1) {
            p {
              color: red;
            }
          }
          div:nth-child(2) {
            margin-left: 10px;
          }
          div:nth-child(3) {
            margin-left: 10px;
          }
        }
      }
    }
  }
}


</style>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API
      .List()
      .then((res) => {
        console.log(res);

        this.list = res.data.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
